<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java Online Compiler</title>
<%--    <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">--%>
<%--    <link rel="bookmark" href="image/favicon.ico" type="image/x-icon" />--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font-awesome.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/core.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css">
    <script src="<%=request.getContextPath()%>/lib/jquery-3.3.1.min.js"></script>
    <script src="<%=request.getContextPath()%>/lib/ace.js"></script>
    <script src="<%=request.getContextPath()%>/lib/ext-language_tools.js"></script>
    <link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/index01.css" rel="stylesheet">
</head>

<body>
<%@include file="../common/nav.jsp"%>

    <div id="editor"></div>
    <div id="console"></div>



    <div id="layer-alter">
        <textarea placeholder="设置参数" class="layui-textarea param"></textarea>
        <div class="layui-row">
            <div class="layui-col-md1 layui-col-md-offset7">
                <i class="fa fa-play-circle fa-fw" title="运行程序"></i>
            </div>
            <div class="layui-col-md1 layui-col-md-offset1">
                <i class="fa fa-angle-double-left fa-fw" title="减少运行时间"></i>
            </div>
            <div class="layui-col-md1 layui-col-md-offset1">
                <i class="fa fa-angle-double-right fa-fw" title="增加运行时间"></i>
            </div>
        </div>
    </div>
</body>
<script src="<%=request.getContextPath()%>/lib/core.js"></script>
<script src="<%=request.getContextPath()%>/layui/layui.js"></script>
<script>
    
    layui.use(['jquery', 'layer'], function(){ 
        
        var $ = layui.$;
        var layer = layui.layer;
        
        $(window).bind('keydown', function(event) {
            if (event.ctrlKey || event.metaKey) {
            	if(String.fromCharCode(event.which).toLowerCase() == 'x'){
            		event.preventDefault();
            		layerIndex = layer.open({
                        title: '消息',
                        type: 1,
                        closeBtn: 0,
                        anim: 5,
                        area: '24%',
                        resize: false,
                        content: $("#layer-alter"),
                    });
            	}
            }
        });

        $('.fa-angle-double-right').click(function(){
           timeout++;
           layer.msg('当前运行时间:'+timeout+'s');
        });

        $('.fa-angle-double-left').click(function(){
           if(timeout-1 > 1){
               timeout--;
           }
           layer.msg('当前运行时间:'+timeout+'s');
        });
        
        $(".fa-play-circle").click(function(){
            var data = {
                code: editor.getValue(),
                timeout: timeout,
                param: $('.param').val()
            }
            $.post("api",data,function(data){ 
           	 	layer.close(layerIndex);
           	 	$('.param').val('');
           	 	$("#console").html('');
        		run(JSON.parse(data));
             });
        });
        
    });

    function run(obj) {
        layer.open({
            title: '控制台',
            type: 1,
            closeBtn: 1,
            anim: 5,
            area: '90%',
            resize: false,
            content: $('#console'),
            success: function() {
                var close = document.createElement('i');
                var time = document.createElement('span');
                $(time).css('float','right');
                time.innerText = '耗时:' + obj.time + 's';
                close.setAttribute('class', 'fa fa-power-off fa-fw');
                $(".layui-layer-ico").append(close);
            	for(var item in obj.data){
            		$("#console").append(obj.data[item]);
            	}
                if(obj.code == -1){
                	$("#console p").css('color','red');
                }
                $(".layui-layer-title").append(time);
            }
        });
    }
</script>

</html>